<template>
  <a-form-model-item :label="widget.name" :prop="widget.model" v-show="!widget.options.hidden">
    <template v-if="widget.type == 'input'">
      <a-input
        v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
        type="number"
        v-model.number="dataModel"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
        :disabled="widget.options.disabled"
      ></a-input>
      <a-input
        v-else
        :type="widget.options.dataType"
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
      ></a-input>
    </template>

    <template v-if="widget.type == 'textarea'">
      <a-input type="textarea" :rows="5" v-model="dataModel" :disabled="widget.options.disabled" :placeholder="widget.options.placeholder" :style="{ width: widget.options.width }"></a-input>
    </template>

    <template v-if="widget.type == 'number'">
      <a-input-number
        v-model="dataModel"
        :style="{ width: widget.options.width }"
        :step="widget.options.step"
        controls-position="right"
        :disabled="widget.options.disabled"
        :min="widget.options.min"
        :max="widget.options.max"
      ></a-input-number>
    </template>

    <template v-if="widget.type == 'radio'">
      <a-radio-group v-model="dataModel" :style="{ width: widget.options.width }" :disabled="widget.options.disabled">
        <a-radio
          :style="{ display: widget.options.inline ? 'inline-block' : 'block' }"
          :value="item.value"
          v-for="(item, index) in widget.options.remote ? widget.options.remoteOptions : widget.options.options"
          :key="index"
          :disabled="item.disabled === true"
        >
          <template v-if="widget.options.remote">{{ item.label }}</template>
          <template v-else>
            {{ widget.options.showLabel ? item.label : item.value }}
          </template>
        </a-radio>
      </a-radio-group>
    </template>

    <template v-if="widget.type == 'checkbox'">
      <a-checkbox-group v-model="dataModel" :style="{ width: widget.options.width }" :disabled="widget.options.disabled">
        <a-checkbox :value="item.value" v-for="(item, index) in widget.options.remote ? widget.options.remoteOptions : widget.options.options" :key="index" :disabled="item.disabled === true">
          <template v-if="widget.options.remote">{{ item.label }}</template>
          <template v-else>
            {{ widget.options.showLabel ? item.label : item.value }}
          </template>
        </a-checkbox>
      </a-checkbox-group>
    </template>

    <template v-if="widget.type == 'time'">
      <a-time-picker
        v-model="dataModel"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrowControl="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{ width: widget.options.width }"
        :inputReadOnly="!widget.options.editable"
      >
        <!-- :readOnly="widget.options.readonly" -->
      </a-time-picker>
    </template>

    <template v-if="widget.type == 'date'">
      <a-date-picker
        :value="dataModel ? moment(dataModel, widget.options.timestamp ? 'X' : widget.options.format) : ''"
        :locale="locale"
        v-if="widget.options.type === 'dateTime'"
        :placeholder="widget.options.placeholder"
        :inputReadOnly="!widget.options.editable"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :showTime="{ format: 'HH:mm:ss' }"
        :value-format="widget.options.timestamp ? 'X' : widget.options.format"
        :style="{ width: widget.options.width }"
        :format="widget.options.format"
        :isopen="open"
        @openChange="openChange"
        @panelChange="panelChange"
        @change="panelChange"
      />
      <a-date-picker
        :value="dataModel ? moment(dataModel, widget.options.timestamp ? 'X' : widget.options.format) : ''"
        :locale="locale"
        v-if="widget.options.type !== 'range' && widget.options.type !== 'week' && widget.options.type !== 'dateTime'"
        :mode="widget.options.type"
        :placeholder="widget.options.placeholder"
        :inputReadOnly="!widget.options.editable"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :showTime="widget.options.type == 'dateTime'"
        :value-format="widget.options.timestamp ? 'X' : widget.options.format"
        :style="{ width: widget.options.width }"
        :format="widget.options.format"
        :isopen="open"
        @openChange="openChange"
        @panelChange="panelChange"
        @change="panelChange"
      ></a-date-picker>
      <a-week-picker
        :locale="locale"
        v-if="widget.options.type == 'week'"
        v-model="dataModel"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :inputReadOnly="!widget.options.editable"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="widget.options.timestamp ? 'X' : widget.options.format"
        :style="{ width: widget.options.width }"
      ></a-week-picker>
      <a-range-picker
        v-if="widget.options.type == 'range'"
        :value="dataModelRange"
        :locale="locale"
        :inputReadOnly="!widget.options.editable"
        :placeholder="['开始时间', '结束时间']"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :style="{ width: widget.options.width }"
        :format="widget.options.format"
        :value-format="widget.options.timestamp ? 'X' : widget.options.format"
        @change="panelChange"
      />
    </template>

    <template v-if="widget.type == 'rate'">
      <a-rate v-model="dataModel" :count="widget.options.max" :disabled="widget.options.disabled" :allow-half="widget.options.allowHalf"></a-rate>
    </template>

    <template v-if="widget.type == 'color'">
      <a-color-picker v-model="dataModel" :disabled="widget.options.disabled" :show-alpha="widget.options.showAlpha"></a-color-picker>
    </template>

    <template v-if="widget.type == 'select'">
      <a-select
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :mode="widget.options.multiple == true ? 'multiple' : 'default'"
        :allowClear="widget.options.clearable"
        :maxTagCount="3"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
        :showSearch="widget.options.filterable"
      >
        <a-select-option v-for="item in widget.options.remote ? widget.options.remoteOptions : widget.options.options" :key="item.value" :value="item.value" :disabled="item.disabled === true">
          {{ widget.options.showLabel || widget.options.remote ? item.label : item.value }}
        </a-select-option>
      </a-select>
    </template>

    <template v-if="widget.type == 'treeSelect'">
      <a-tree-select
        v-model="dataModel"
        :style="{ width: widget.options.width }"
        :disabled="widget.options.disabled"
        :tree-data="widget.options.remote ? widget.options.remoteOptions : widget.options.options"
        :show-checked-strategy="treeMode[widget.options.showCheckedStrategy]"
        :placeholder="widget.options.placeholder"
        :tree-default-expand-all="widget.options.expand"
        :maxTagCount="3"
        :maxTagTextLength="6"
        :multiple="widget.options.multiple"
        :allowClear="widget.options.clearable"
        :showSearch="widget.options.filterable"
        :treeCheckable="widget.options.multiple"
        :replaceFields="{
          title: 'label',
          value: 'value',
          key: 'value'
        }"
      ></a-tree-select>
    </template>

    <template v-if="widget.type == 'switch'">
      <a-switch v-model="dataModel" :disabled="widget.options.disabled"></a-switch>
    </template>

    <template v-if="widget.type == 'slider'">
      <a-slider
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :style="{ width: widget.options.width }"
      ></a-slider>
    </template>

    <template v-if="widget.type == 'editor'">
      <vue-editor v-model="dataModel" :disabled="widget.options.disabled" :style="{ width: widget.options.width }"></vue-editor>
    </template>

    <template v-if="widget.type == 'cascader'">
      <a-cascader
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
        :options="widget.options.remoteOptions"
      ></a-cascader>
    </template>

    <template v-if="widget.type == 'text'">
      <span>{{ dataModel }}</span>
    </template>
  </a-form-model-item>
</template>

<script>
import moment from 'moment'
//日期框国际化
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { TreeSelect } from 'ant-design-vue'

const treeMode = [, TreeSelect.SHOW_CHILD, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_ALL]

export default {
  props: ['widget', 'models', 'rules', 'remote'],
  components: {},
  data() {
    return {
      treeMode,
      locale,
      dataModel: null,
      open: false,
      dataModelRange: []
    }
  },
  created() {
    if (this.widget.type == 'date' || this.widget.options.type === 'dateTime') {
      if (this.models[this.widget.model] !== undefined && this.models[this.widget.model] !== '') {
        this.dataModel = this.models[this.widget.model] + ''
      } else {
        this.dataModel = parseInt(moment().valueOf() / 1000)
      }
    } else {
      this.dataModel = this.models[this.widget.model]
    }
    if (this.widget.type == 'date' && this.widget.options.type === 'range') {
      if (this.dataModel !== '') {
        this.dataModelRange = this.dataModel.split(',')
      }
    }

    if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc] && this.widget.type !== 'treeSelect') {
      this.remote[this.widget.options.remoteFunc]((data) => {
        this.widget.options.remoteOptions = data.map((item) => {
          return {
            value: item[this.widget.options.props.value],
            label: item[this.widget.options.props.label],
            disabled: item.disabled === true ? item.disabled : false,
            children: item[this.widget.options.props.children]
          }
        })
      })
    }
    if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc] && this.widget.type == 'treeSelect') {
      this.remote[this.widget.options.remoteFunc]((data) => {
        const list = data.map((item) => {
          return {
            value: item[this.widget.options.props.value],
            label: item[this.widget.options.props.label],
            disabled: item.disabled === true ? item.disabled : false,
            parentId: item[this.widget.options.props.parentId]
          }
        })
        this.widget.options.remoteOptions = this.treeData(list)
        console.log(this.widget.options.remoteOptions)
      })
    }

    if (this.widget.type === 'imgupload' && this.widget.options.isQiniu) {
      this.remote[this.widget.options.tokenFunc]((data) => {
        this.widget.options.token = data
      })
    }
  },
  methods: {
    moment,
    treeData(list) {
      let cloneData = JSON.parse(JSON.stringify(list))
      return cloneData.filter((father) => {
        let branchArr = cloneData.filter((child) => father.value == child.parentId) // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : '' // 如果存在子级，则给父级添加一个children属性，并赋值
        return father.parentId == 0 || father.parentId == null // 返回第一层
      })
    },
    openChange(status) {
      if (status) {
        this.isopen = true
      } else {
        this.isopen = false
      }
    },
    panelChange(value, date) {
      if (date != 'time') {
        if (value != null) {
          if (this.widget.type == 'date' && this.widget.options.type === 'range') {
            this.dataModelRange = value
            this.dataModel = this.dataModelRange.join(',')
          } else {
            this.dataModel = value
          }
        } else {
          this.dataModel = ''
        }
      }
      this.isopen = false
    },
    treeSelectChange(value, label, extra) {
      console.log(value, label, extra)
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val, oldVal) {
        this.models[this.widget.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
        if (oldVal !== null) {
          console.log(val)
          this.$emit('on-change', null)
        }
      }
    },
    models: {
      deep: true,
      handler(val) {
        if (this.widget.type == 'date' && this.widget.options.type !== 'range') {
          this.dataModel = val[this.widget.model] + ''
        } else {
          this.dataModel = val[this.widget.model]
        }
      }
    }
  }
}
</script>
